<template>
  <view>
    <view class="goodsItem">
      <!-- 左边区域 -->
      <view class="leftImg">
         <radio :checked="item.goods_state" color="#E03440" v-if="showRadio" style="transform:scale(0.7)" @click="radioClickHandler"></radio>
        <image :src="item.goods_small_logo||defaultPic" class="goodsImg"></image>
      </view>
      <!-- 右边区域 -->
      <view class="righInfo">
        <view class="goodsName u-line-2">{{item.goods_name}}</view>
       <view class="infoBox">
        <view class="goodsPrice">¥{{item.goods_price|toFixed}}</view>
        <!-- 价格区域 -->
        <uni-number-box :min="1" :value="item.goods_count" v-if="showNumberBox" @change="numChangeHandler"></uni-number-box>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    props:{
      item:{
        type:Object,
        default:{}
      },
      showRadio:{
        type:Boolean,
        default:false
      },
      showNumberBox:{
        type:Boolean,
        default:false
      }
    },
    data() {
      return {
         defaultPic: 'https://img3.doubanio.com/f/movie/8dd0c794499fe925ae2ae89ee30cd225750457b4/pics/move        /celebrity-default-medium.png'      //// 默认的空图片
      };
    },
    //过滤器,把价格转化为两位数
    filters:{
      toFixed(num){
        return Number(num).toFixed(2)
      }
    },
    methods:{
      radioClickHandler(){
        this.$emit('radio-change', {
      // 商品的 Id
      goods_id: this.item.goods_id,
      // 商品最新的勾选状态
      goods_state: !this.item.goods_state
    })
      },
      numChangeHandler(val){
        this.$emit('num-change',{
          goods_id: this.item.goods_id,
          goods_count:+val
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
.goodsItem{
  display: flex;
  padding: 19rpx;
  // border-bottom: 1px solid #f0f0f0;
  //  // 让 goods-item 项占满整个屏幕的宽度
  //   width: 750rpx;
  // 设置盒模型为 border-box
    box-sizing: border-box;
  .leftImg{
    display: flex;
    align-items: center;
    .goodsImg{
      width: 190rpx;
      height: 190rpx;
      display: block;
    }
  }
  .righInfo{
    flex: 1;
    height: 180rpx;
    margin-left: 30rpx;
    font-size: 24rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .infoBox{
      display: flex;
      justify-content: space-between;
      align-items: center;
      .goodsPrice{
        color: #E03440;
        font-weight: bold;
      }
    }
   
  }
}
</style>